import Stats from 'stats.js';
import * as T from 'three';

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom

const scene = new T.Scene();
const camera = new T.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 100, 100);
camera.lookAt(new T.Vector3(0, 0, 0));
// camera.position.z = 5;

const axesHelper = new T.AxesHelper(50);
scene.add(axesHelper);

const lineGeometry = new T.Geometry();
const lineMeterial = new T.LineBasicMaterial({
  color: 0xff4400,
});

lineGeometry.vertices.push(new T.Vector3(-10, 0, -10));
lineGeometry.vertices.push(new T.Vector3(0, 40, 0));
lineGeometry.vertices.push(new T.Vector3(10, 0, 10));

const line = new T.Line(lineGeometry, lineMeterial);

scene.add(line);

const renderer = new T.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(stats.dom);
document.body.appendChild(renderer.domElement);

function animate() {
  stats.begin();

  // scene.rotation.x += 0.01;
  scene.rotation.y += 0.01;
  // scene.rotation.z += 0.01;

  renderer.render(scene, camera);
  stats.end();

  requestAnimationFrame(animate);
}
animate();
